html, body {
  width: 100%;
  height: 100%; }

#result {
  display: none;
  -webkit-transition: all .5s;
  transition: all .5s;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute; }
  #result .result-bg {
    width: 11.55rem;
    height: 13.45rem;
    position: absolute;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 6.1rem;
    overflow: initial; }
    #result .result-bg img {
      overflow: hidden;
      position: absolute;
      left: -999px;
      right: -999px;
      margin: auto;
      top: -999px;
      bottom: -999px;
      -webkit-transform-origin: 50% 51%;
      transform-origin: 50% 51%; }
  #result .user-message {
    width: 14.7rem;
    height: 5.4rem;
    background: url(../img/result-page/user-title-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    left: 0.75rem;
    top: 0.8rem;
    line-height: 5.4rem; }
    #result .user-message .user-icon {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      overflow: hidden;
      vertical-align: middle;
      position: absolute;
      top: 0.9rem;
      left: 1.1rem;
      z-index: 2; }
      #result .user-message .user-icon img {
        width: 110%; }
    #result .user-message .username {
      margin-left: 7.25rem;
      font-size: 1.2rem; }
  #result .result-logo {
    width: 13.1rem;
    height: 3.9rem;
    overflow: hidden;
    position: absolute;
    right: 0.8rem;
    top: 0.8rem; }
    #result .result-logo img {
      width: 100%;
      vertical-align: middle; }
  #result .duanwei {
    width: 11.55rem;
    height: 13.45rem;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 6.1rem; }
    #result .duanwei img {
      width: 100%; }
  #result .answer-result {
    width: 17rem;
    height: 5.1rem;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 19.25rem;
    background: url(../img/result-page/result-answer-bg.png);
    background-size: 100%;
    line-height: 5.1rem;
    text-align: center;
    font-size: 2.5rem; }
  #result .wenan {
    width: 35.45rem;
    height: 10rem;
    background: url(../img/result-page/result-wenan-bg.png) no-repeat;
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 24.7rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
    padding-top: 1.8rem; }
    #result .wenan .text {
      width: 29rem;
      margin: auto;
      text-align: center; }
  #result .challengeAgain {
    width: 15.25rem;
    height: 5.7rem;
    background: url(../img/result-page/challengeAgain-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 35.6rem;
    left: 1.9rem;
    -webkit-animation: challenge 2s infinite linear;
    animation: challenge 2s infinite linear; }
    #result .challengeAgain a {
      margin-left: 4.8rem; }
  #result a {
    display: inline-block;
    font-size: 1.7rem;
    width: 100%;
    height: 100%;
    line-height: 5rem;
    margin-left: 1.8rem; }
  #result .share {
    width: 17.3rem;
    height: 5.6rem;
    background: url(../img/result-page/pengyouquan-bg.png) no-repeat;
    background-size: 100%;
    position: absolute;
    top: 35.6rem;
    right: 1.1rem;
    overflow: hidden;
    -webkit-animation: challenge 2s infinite linear;
    animation: challenge 2s infinite linear; }
  #result .paihang-title {
    width: 20.85rem;
    height: 5.95rem;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 41.5rem;
    z-index: 1; }
    #result .paihang-title img {
      width: 100%; }
  #result .paihang-content {
    width: 34.25rem;
    height: 14.1rem;
    background: url(../img/result-page/paiming-bg.png);
    background-size: 100%;
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
    top: 45.4rem; }
    #result .paihang-content ul {
      padding-top: 2rem; }
      #result .paihang-content ul li {
        height: 3.5rem;
        line-height: 3.5rem;
        margin-bottom: 0.25rem; }
        #result .paihang-content ul li::after {
          content: "";
          display: block;
          clear: both; }
        #result .paihang-content ul li div {
          float: left; }
        #result .paihang-content ul li .index {
          width: 2.8rem;
          text-align: center;
          line-height: 3.5rem;
          margin-left: 1rem; }
        #result .paihang-content ul li .name {
          height: 3.5rem;
          line-height: 3.5rem; }
          #result .paihang-content ul li .name .user-icon {
            width: 3.5rem;
            height: 3.5rem;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            line-height: 3.5rem;
            margin-right: 0.6rem; }
            #result .paihang-content ul li .name .user-icon img {
              height: 100%; }
        #result .paihang-content ul li .pingfen {
          float: right;
          height: 3.5rem;
          line-height: 3.5rem; }
          #result .paihang-content ul li .pingfen .duanwei-icon {
            display: inline-block;
            width: 2.4rem;
            height: 3.3rem;
            overflow: hidden;
            vertical-align: middle;
            margin: 0 2.5rem 0 1.1rem; }
            #result .paihang-content ul li .pingfen .duanwei-icon img {
              width: 100%; }

@-webkit-keyframes challenge {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  50% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }

@keyframes challenge {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  25% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px); }
  50% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); }
  75% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px); }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px); } }
